
<template>
  <div>
    <Content />
    <h2>{{ msg }}</h2>
    <button @click="changeMsg">改变Msg</button>
    <!-- 模板自动解析value值 -->
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">改变counter</button>
    <h2>{{name}}</h2>
    <button @click="changeObjName">改变obj</button>
    <h2>{{children.name}}</h2>

  </div>
</template>

<script>
import Content from './components/Content.vue';
import { ref ,reactive,toRefs} from 'vue'
export default {
  data() {
    return {
      massage: "helloworld",
    };
  },//组合式API:将同一个逻辑关注点相关代码收集在一起
  //setup中不要使用this    this不会指向实例
  setup() {
    //没有响应式 msg代码
    console.log('setup');
    let msg = 'hello';
    console.log(msg);//数据不是响应式的
    function changeMsg() {
      msg = '你好'
    }
    //通过ref定义响应式变量
    //counter 的逻辑代码
    const counter = ref(0)//ref()返回的是对象
    function changeCounter() {
      counter.value++
    }
    //定义引用类型的数据
    //obj的逻辑代码
    const obj=reactive({//响应式的
      name:"张三",
      age:18,
      children:{
        name:"小王"
      }
    })
    function changeObjName(){
      obj.name="李四"
    }
    return { msg, changeMsg, counter, changeCounter ,obj,changeObjName,...toRefs(obj)};
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },

  components: {
    Content
  },

  methods: {}
}

</script>
<style lang='less' scoped>
</style>